<template>
	<view>
		<!-- 头部 -->
		<view class="initial-Share-view">
			<view class="padding-30">
				<view class="margin-top150 mine-header">
					<view class="mine-header-view">
						<image @click="uploadImage" class="mine-header-image" :src="avatar" mode=""></image>
						<view class="mine-header-message">
							<view>姓名: {{userInfo.real_name}}</view>
							<view>手机: {{userInfo.mobile}}</view>
						</view>
					</view>
					<view class="mine-signIn" @click="goToUrl('/pages/mine/mine-list/newYear-signIn')">
						<view class="mine-signIn-text">雄安房产</view>
						<u-icon name="arrow-right" size="14" style="margin-top: 2rpx;"></u-icon>
					</view>
				</view>
				<icon-title comTitle="我的钱包" desc rightIocn>
					<image class="initial-mine-image" src="../../static/mine/02.png" mode=""></image>
					<template v-slot:rightImage>
						<view style="display: flex;align-items: center;" @click="goToCoins" v-if="userInfo.txspring == 1">
							<text class="initial-coins">新春提现币</text>
							<image class="initial-mine-image2" src="../../static/mine/28.png" mode=""></image>
						</view>
					</template>
				</icon-title>
			</view>
		</view>
		<!-- 卡片红包 -->
		<view class="padding-30" style="margin-top: -190rpx;">
			<view class="initialShare-card-view">
				<view class="initialShare-card-viewItem" v-for="(item,index) in cardList" :key="index">
					<view class="initialShare-card-topItem" style="margin-bottom: 20rpx;" @click="goToUrl1(item)">
						<view style="font-size: 14px; color: #FFF0CA;">{{item.title}}</view>
						<view style="font-size: 12px; color: #FF896B;">{{item.title1}}></view>
					</view>
					<view class="initialShare-card-bottomItem">
						<view style="font-size: 14px; color: #FFF0CA;">{{item.number}}</view>
						<template v-if="item.status">
							<button-round @click="goToUrl('/pages/mine/mine-list/recharge')" name="充值"
								backgroundColor='#FFF0CA' color="#BE1A0A" font-size="12px"></button-round>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 梦创原始股 -->
		<view class="padding-30">
			<view class="nav-view">
				<icon-title comTitle="梦创原始股 " desc :rightTitle="userInfo.sharehold+'股'" rightIocn color="#333333">
					<image class="initial-mine-image1" src="../../static/app/logo.png" mode=""></image>
				</icon-title>
			</view>
		</view>
		<!-- 个人中心列表 -->
		<view class="padding-30">
			<view class="mine-list">
				<view class="mine-item" v-for="(item,index) in mineList" :key="index" @click="goToUrl(item.path)">
					<image class="mine-item-image" :src="item.image" mode=""></image>
					<text class="mine-item-text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<view class="padding-30">
			<bottom-button name="退出登录" @click="goOutLogin"></bottom-button>
		</view>
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
	import iconTitle from "@/components/title/icon-title.vue"
	import buttonRound from "@/components/button/button-round.vue"
	import bottomButton from "@/components/button/bottomButton.vue"
	export default {
		components: {
			iconTitle,
			buttonRound,
			bottomButton
		},
		data() {
			return {
				userInfo:{},
				avatar:'',
				cardList: [{
						title: '新春红包',
						title1: '提现',
						number: '',
						status: false,
						type:'spring',
						path: '/pages/mine/mine-list/withdrawal'
					},
					{
						title: '收益分红',
						title1: '提现',
						number: '',
						status: false,
						type:'guoliang',
						path: '/pages/mine/mine-list/withdrawal'
					},
					{
						title: '团队钱包',
						title1: '提现',
						number: '',
						status: false,
						type:'elimit',
						path: '/pages/mine/mine-list/withdrawal'
					},
					{
						title: '余额',
						title1: '提现',
						number: '',
						status: true,
						type:'user_money',
						path: '/pages/mine/mine-list/withdrawal'
					}
				],
				mineList: [{
						image: '../../static/mine/03.png',
						text: '梦创奖品',
						path: '/pages/mine/mine-list/mengchuang-gift'
					},
					// {
					// 	image: '../../static/mine/03_1.png',
					// 	text: '下载APP',
					// 	path: '/pages/index/index-list/app-download'
					// },
					{
						image: '../../static/mine/04.png',
						text: '我的团队',
						path: '/pages/mine/mine-list/mine-team'
					},
					{
						image: '../../static/mine/05.png',
						text: '收益明细',
						path: '/pages/mine/mine-list/revenue-details'
					},
					{
						image: '../../static/mine/06.png',
						text: '购买记录',
						path: '/pages/mine/mine-list/purchase-record'
					},
					{
						image: '../../static/mine/07.png',
						text: '提现记录',
						path: '/pages/mine/mine-list/withdrawal-records'
					},
					{
						image: '../../static/mine/08.png',
						text: '收货地址',
						path: '/pages/mine/mine-list/address'
					},
					{
						image: '../../static/mine/09.png',
						text: '邀请好友',
						path: '/pages/mine/mine-list/invite-friends'
					},
					{
						image: '../../static/mine/10.png',
						text: '在线客服',
						path: '/pages/mine/mine-list/service'
					},
					{
						image: '../../static/mine/11.png',
						text: '修改密码',
						path: '/pages/mine/mine-list/set-password'
					},
					// {image:'../../static/mine/12.png',text:'退出登录',path:''},
				]
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			goToCoins(){
				let form={
					order_type:2,
					type:6
				}
				this.$tools.navigateTo('/pages/pay/pay?form='+ JSON.stringify(form))
			},
			goToInitial(){
				this.$tools.navigateTo('/pages/mine/mine-list/mengchuang-initialShare')
			},
			goToUrl1(item) {
				let path = ''
				if(item.type == 'spring'){
				   path = item.path +'?amount='+item.number + '&type=' + 'spring'
				}
				if(item.type == 'guoliang'){
				   path = item.path +'?amount='+item.number + '&type=' + 'guoliang'
				}
				if(item.type == 'elimit'){
				   path = item.path +'?amount='+item.number + '&type=' + 'elimit'
				}
				if(item.type == 'user_money'){
				   path = item.path +'?amount='+item.number + '&type=' + 'user_money'
				}
				this.$tools.navigateTo(path)
			},
			goToUrl(path) {
				this.$tools.navigateTo(path)
			},
			goOutLogin() {
				uni.removeStorageSync('loginStatus')
				uni.removeStorageSync('token')
				this.$tools.reLaunch('/pages/login/login')
			},
			getUserInfo() {
				this.$http.post(this.$api.getUserInfo, {}, {
					token: true
				}).then(res => {
					this.userInfo = res.data
					this.avatar = res.data.avatar
					this.cardList[0].number = res.data.spring
					this.cardList[1].number = res.data.guoliang
					this.cardList[2].number = res.data.elimit
					this.cardList[3].number = res.data.user_money
				})
			},
			uploadImage() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: function(res) {
						uni.uploadFile({
							url: that.$api.upload + 'Upload/image',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: res => {
								let result = JSON.parse(res.data);
								that.avatar = result.data.uri;
								that.setAvatar()
							}
						});
					}
				});
			},
			setAvatar() {
				this.$http.post(this.$api.setAvatar, {
					avatar: this.avatar
				}, {
					token: true
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '头像上传成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.initial-coins{
		color: #ffffff;
		margin-right: 20rpx;
	}
	.mine-signIn-text{
		margin-right: 10rpx;
	}
	.mine-header{
		display: flex;
		justify-content: space-between;
		// position: relative;
	}
	.mine-signIn{
		position: absolute;
		// bottom: ;
		right: 0;
		width: 160rpx;
		height: 60rpx;
		border-radius: 40rpx 0px 0px 40rpx;
		background: rgba(158, 24, 6, 0.8);
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #ffffff;
		padding-left: 20rpx;
	}
	.nav-view{
		background-color: #FFF0CA;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}
	.mine-header-view {
		display: flex;
		align-items: center;
	}

	.mine-header-image {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.mine-header-message {
		font-size: 18px;
		color: #ffffff;
	}

	.initial-Share-view {
		width: 100%;
		height: 550rpx;
		background: url('../../static/index/18.png')no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		// position: relative;
	}

	.initial-mine-image {
		width: 40rpx;
		height: 40rpx;
	}
	.initial-mine-image2 {
		width: 50rpx;
		height: 50rpx;
	}
	
	.initial-mine-image1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.initialShare-card-view {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.initialShare-card-viewItem:nth-child(2n) {
		margin-right: 0;
	}

	.initialShare-card-viewItem {
		width: 48%;
		height: 140rpx;
		padding: 20rpx;
		border: 2px solid #FCFF57;
		border-radius: 12rpx;
		background: linear-gradient(180deg, #FC5B26 0%, #C52B21 100%);
		margin: 0 25rpx 20rpx 0rpx;
	}

	.initialShare-card-topItem,
	.initialShare-card-bottomItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mine-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #FFF0CA;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 10rpx 30rpx;
	}


	.mine-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.mine-item-image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}

	.mine-item-text {
		font-size: 14px;
		color: #333333;
	}
</style>